<script lang="ts" setup>
import { ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useTownStore } from "@/stores";
import {
  ChatLineSquare,
  Comment,
  Guide,
  HomeFilled,
  PartlyCloudy,
  Shop,
  Tools,
  WindPower,
} from "@element-plus/icons-vue";

/* 数据 */
const townStore = useTownStore();
const activeIndex = ref("1");
const currentTownName = ref("南苑小镇");

// 获取当前路由路径
const route = useRoute();

// 获取 Vue Router 实例
const router = useRouter();

/* 回调 */
// 当用户需要切换小镇时回调
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
  if (key === "-1") {
    window.location.reload(); // TODO: 这里直接刷新有些过激...
    router.push("/"); // 或者重定向到特定路由
  }
  // 更新 activeIndex
  activeIndex.value = key;
};

/* 侦听 */
// 监听路由变化，动态设置 activeIndex, 使导航栏正确响应
watch(
  () => route.path,
  (newPath) => {
    if (newPath === "/") {
      activeIndex.value = "1";
    } else if (newPath === "/news") {
      activeIndex.value = "2";
    } else if (newPath === "/culture") {
      activeIndex.value = "3";
    } else if (newPath === "/protection") {
      activeIndex.value = "4";
    } else if (newPath === "/service-travel") {
      activeIndex.value = "5-1";
    } else if (newPath === "/service-food") {
      activeIndex.value = "5-2";
    } else if (newPath === "/service-product") {
      activeIndex.value = "5-3";
    } else if (newPath === "/service-inn") {
      activeIndex.value = "5-4";
    } else if (newPath === "/admin-merchant") {
      activeIndex.value = "6-1";
    } else if (newPath === "/admin-town") {
      activeIndex.value = "6-2";
    } else if (newPath === "/admin-user") {
      activeIndex.value = "6-3";
    } else if (newPath === "/admin-web") {
      activeIndex.value = "6-4";
    } else if (newPath === "/about") {
      activeIndex.value = "7";
    }
  },
  { immediate: true },
);

watch(
  () => townStore.currentTown,
  (newTown) => {
    if (newTown && newTown.townname) {
      currentTownName.value = newTown.townname;
    }
  },
  { immediate: true },
);
</script>

<template>
  <!-- 页面路由: 可让用户选择页面 -->
  <div class="page-router">
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
    >
      <el-menu-item index="0">
        <RouterLink class="router-link" to="/">
          <h1 class="large-font">
            <el-icon :size="40"><WindPower /></el-icon>
            <b>{{ currentTownName }}</b>
          </h1>
        </RouterLink>
      </el-menu-item>
      <RouterLink to="/">
        <el-menu-item index="-1">
          <el-text class="mx-1" type="info">切换小镇</el-text>
        </el-menu-item>
      </RouterLink>
      <RouterLink class="router-link" to="/">
        <el-menu-item index="1">
          <el-icon><HomeFilled /></el-icon>主页
        </el-menu-item>
      </RouterLink>
      <RouterLink to="/news">
        <el-menu-item index="2">
          <el-icon><ChatLineSquare /></el-icon>动态
        </el-menu-item>
      </RouterLink>
      <RouterLink to="/culture">
        <el-menu-item index="3">
          <el-icon><Guide /></el-icon>文化
        </el-menu-item>
      </RouterLink>
      <RouterLink to="/protection">
        <el-menu-item index="4">
          <el-icon><PartlyCloudy /></el-icon>保护
        </el-menu-item>
      </RouterLink>
      <el-sub-menu index="5">
        <template #title>
          <el-icon><Shop /></el-icon>服务
        </template>
        <RouterLink to="/service-travel">
          <el-menu-item index="5-1">
            <el-text class="mx-1" type="primary">旅游</el-text>
          </el-menu-item>
        </RouterLink>
        <RouterLink to="/service-food">
          <el-menu-item index="5-2">
            <el-text class="mx-1" type="primary">美食</el-text>
          </el-menu-item>
        </RouterLink>
        <RouterLink to="/service-product">
          <el-menu-item index="5-3">
            <el-text class="mx-1" type="primary">商品</el-text>
          </el-menu-item>
        </RouterLink>
        <RouterLink to="/service-inn">
          <el-menu-item index="5-4">
            <el-text class="mx-1" type="primary">客栈</el-text>
          </el-menu-item>
        </RouterLink>
      </el-sub-menu>
      <el-sub-menu index="6">
        <template #title>
          <el-icon><Tools /></el-icon>管理
        </template>
        <RouterLink to="/admin-merchant">
          <el-menu-item index="6-1">
            <el-text class="mx-1" type="primary">商家管理</el-text>
          </el-menu-item>
        </RouterLink>
        <RouterLink to="/admin-town">
          <el-menu-item index="6-2">
            <el-text class="mx-1" type="primary">小镇管理</el-text>
          </el-menu-item>
        </RouterLink>
        <RouterLink to="/admin-user">
          <el-menu-item index="6-3">
            <el-text class="mx-1" type="primary">用户管理</el-text>
          </el-menu-item>
        </RouterLink>
        <RouterLink to="/admin-web">
          <el-menu-item index="6-4">
            <el-text class="mx-1" type="primary">网站管理</el-text>
          </el-menu-item>
        </RouterLink>
      </el-sub-menu>
      <RouterLink to="/about">
        <el-menu-item index="7">
          <el-icon><Comment /></el-icon>关于
        </el-menu-item>
      </RouterLink>
    </el-menu>
  </div>
</template>

<style>
/* 让导航栏自动靠右 */
.el-menu--horizontal > .el-menu-item:nth-child(1) {
  margin-right: auto;
}

/* 去掉导航栏下划线 */
a {
  text-decoration: none;
}

/* 确保 affix 容器宽度适应页面 */
.affix-container {
  width: 100%;
}

/* 让导航栏字体大一点 */
.large-font {
  font-size: 25px;
}

/* 调整导航栏和主体的间距 */
.page-router {
  padding: 0;
}

/* 调整导航栏和主体的间距 */
.page-router .el-menu-item {
  padding: 30px;
}
</style>
